<template>
  <div class="app-container">
    <el-table border :data="tableData.list" v-loading="loading" element-loading-text="加载中..."
              class="el-table-align-center">
      <el-table-column label="序号" type="index" width="80px" align="center"></el-table-column>

      <el-table-column label="三方支付名称" prop="channelName" align="center" v-if="channel==1"></el-table-column>
      <el-table-column label="商户号" prop="merchantCode" align="center" v-if="channel==1"></el-table-column>

      <el-table-column label="收款人" prop="name" align="center" v-if="channel==2"></el-table-column>
      <el-table-column label="银行名称" prop="bankName" align="center" v-if="channel==2"></el-table-column>
      <el-table-column label="收款银行卡号" prop="cardNo" align="center" v-if="channel==2"></el-table-column>

      <el-table-column label="入款成功率" prop="successRate" align="center">
       <template slot-scope="{row}">
         {{row.successRate/100 | currency}}%
       </template>
      </el-table-column>
      <el-table-column label="当日收款上限" prop="dailyLimit" align="center"></el-table-column>
      <el-table-column label="今日已收款额" prop="successAmount" align="center"></el-table-column>
      <el-table-column label="轮替状态" prop="" align="center">
        <template slot-scope="{row}">
          {{row.status === 0 ? '使用中' :'已停用'}}
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>


<script>
  import {paymentThirdAccountTotalApi, paymentBankcardTotalApi} from "@/services/api/payment";
  import {grid, form} from '@/build'

  export default {
    name: "recharge-payment-merchant",
    components: {},
    props: {
      channel: {
        type: Number,
        default: 1
      }
    },
    mixins: [grid, form],
    data() {
      return {
        tableData: [],
        filters: {
          page: 1,
          size: 10
        }
      }
    },
    methods: {
      changeHandler() {
        this.gridSearch()
      },
    },
    mounted() {
      let api = this.channel == 1 ? paymentThirdAccountTotalApi : paymentBankcardTotalApi
      this.bindGet(api, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters'
      });
      this.getAll();
    }
  }
</script>

<style lang="scss" scoped>
  .el-table-align-center {
    &.el-table {
      width: 100%;
      text-align: center !important;

      th {
        text-align: center !important;
      }
    }
  }

</style>
